<script>
import { useUserStore } from "./store/userStore";
export default {
  data() {
    return {
      imgBaseURL: import.meta.env.VITE_DOWNFILE_API_BASE_URL
    }
  },
  computed: {
    userInfo() {
      const userStore = useUserStore();
      return userStore.userInfo
    }
  },
  methods: {
    logout() {
      const userStore = useUserStore();
      userStore.logout()

      if (!userStore.userInfo) {
        this.$router.push('/login')
      }
    }
  }
}
</script>

<template>
  <el-header style="padding:10px;width: 100%;font-weight: 600;height: 70px; background-color: #fff;"
    v-if="$route.name != 'login' && $route.name != 'register'">
    <div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
      <div style="width: 100%;">
        <div style="width: 100%;display: flex;align-items: center;">
          <img src="./assets/logoH.png" style="height: 50px" class="hidden-xs-only" />
          <el-menu default-active="/" class="el-menu-demo" mode="horizontal" style="width: 100%;border:none" router>
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item index="/qnCenter">问卷中心</el-menu-item>
          </el-menu>
        </div>
      </div>
      <div>
        <el-dropdown>
          <el-button type="primary" round @click="() => { this.$router.push('/login') }" v-if="!userInfo">
            未登录
          </el-button>
          <el-button type="primary" v-else round>

            <el-avatar :size="20" style="margin-right: 4px;"
              :src="imgBaseURL + userInfo.avatar"
              @click="fileUploadVisible = true"></el-avatar>
            {{ userInfo.nickName }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="() => { this.$router.push('/userCenter') }">工作台</el-dropdown-item>
              <el-dropdown-item @click="logout">注销登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </el-header>
  <el-main style="height: 100%;padding:0px">
    <RouterView />
  </el-main>
  <!-- {{this.$route.path.indexOf('userCenter')}} -->
  <el-footer style="background-color: #121212;padding:40px 0px;height: fit-content;"
    v-if="$route.path.indexOf('userCenter') < 0 && $route.path.indexOf('createQN') < 0 && $route.path.indexOf('login') < 0 && $route.path.indexOf('register') < 0">
    <div style="font-size:12px;margin:20px 0px;color:#f4f5f6;text-align: center">
      <el-link href="https://ai.zscampus.com/psy">含光心理社区</el-link>
    </div>
    <div style="font-size:12px;margin:20px 0px;color:#f4f5f6;text-align: center">
      <el-link href="https://ai.zscampus.com"> © 含光AI提供技术支持</el-link>
    </div>
  </el-footer>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
